/* 数据格式演示
var aqiSourceData = {
  "北京": {
    "2016-01-01": 10,
    "2016-01-02": 10,
    "2016-01-03": 10,
    "2016-01-04": 10
  }
};
*/

// 以下两个函数用于随机模拟生成测试数据
function getDateStr(dat) {
    var y = dat.getFullYear();
    var m = dat.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    var d = dat.getDate();
    d = d < 10 ? '0' + d : d;
    return y + '-' + m + '-' + d;
}

function randomBuildData(seed) {
    var returnData = {};
    var dat = new Date("2016-01-01");
    var datStr = ''
    for (var i = 1; i < 92; i++) {
        datStr = getDateStr(dat);
        returnData[datStr] = Math.ceil(Math.random() * seed);
        dat.setDate(dat.getDate() + 1);
    }
    return returnData;
}

var aqiSourceData = {
    "北京": randomBuildData(500),
    "上海": randomBuildData(300),
    "广州": randomBuildData(200),
    "深圳": randomBuildData(100),
    "成都": randomBuildData(300),
    "西安": randomBuildData(500),
    "福州": randomBuildData(100),
    "厦门": randomBuildData(100),
    "沈阳": randomBuildData(500)
};

// 用于渲染图表的数据
var chartData = {};

// 记录当前页面的表单选项
var pageState = {
    nowSelectCity: -1,
    nowGraTime: "day"
}

/**
 * 渲染图表
 */
function renderChart() {
    var city = pageState["nowSelectCity"];
    var time = pageState["nowGraTime"];
    console.log(time);
    var wrap = document.getElementById("wrap");
    wrap.innerHTML = "";
    console.log(chartData[time][city]);
    var aqis = chartData[time][city];
    var colors = ["rgba(183, 240, 0, 0.6)", "rgba(0,213,26, 0.6)", "rgba(256,224,0, 0.6)", "rgba(145,195,0,0.6)"];
    var i = 0;
    var long = 0;
    if (time == "day") {
        long = 10;
    } else if (time == "week") {
        long = 70;
    } else if (time == "month") {
        long = 300;
    }
    for (k in aqis) {
        var aqiDiv = document.createElement("div");
        var infoDiv = document.createElement("div");
        aqiDiv.setAttribute("class", "aqi-chart-wrap");
        aqiDiv.setAttribute("style", "background:" + colors[i % 4] + "; height:" + aqis[k] + "px; width:" + long + "px; left:" + i * long + "px");
        infoDiv.setAttribute("class", "info");
        infoDiv.innerHTML = "时间:" + k + "; AQI:" + aqis[k];
        aqiDiv.appendChild(infoDiv);
        wrap.appendChild(aqiDiv);
        i++;
    }
    wrap.setAttribute("style", "width:" + i * long + "px");
}

/**
 * 日、周、月的radio事件点击时的处理函数
 */
function graTimeChange() {
    var times = document.getElementsByName("gra-time");
    var timeNow = "";
    for (var i = 0; i < times.length; i++) {
        if (times[i].checked) {
            timeNow = times[i].value;
        }
    }
    console.log(timeNow);
    // 确定是否选项发生了变化 
    if (timeNow == pageState["nowGraTime"]) {
        return false;
    } else {
        // 设置对应数据
        pageState["nowGraTime"] = timeNow;
        // 调用图表渲染函数
        renderChart();
    }
}

/**
 * select发生变化时的处理函数
 */
function citySelectChange() {
    var cityNow = document.getElementById("city-select").value;
    // 确定是否选项发生了变化
    if (cityNow == pageState["nowSelectCity"]) {
        return false;
    } else {
        // 设置对应数据
        pageState["nowSelectCity"] = cityNow;
        // 调用图表渲染函数
        renderChart();
    }
}

/**
 * 初始化日、周、月的radio事件，当点击时，调用函数graTimeChange
 */
function initGraTimeForm() {
    var times = document.getElementsByName("gra-time");
    for (var i = 0; i < times.length; i++) {
        times[i].addEventListener("click", graTimeChange);
    }
}

/**
 * 初始化城市Select下拉选择框中的选项
 */
function initCitySelector() {
    var citySelect = document.getElementById("city-select");
    // 读取aqiSourceData中的城市，然后设置id为city-select的下拉列表中的选项
    for (var city in aqiSourceData) {
        var option = document.createElement("option");
        option.value = city;
        option.innerHTML = city;
        citySelect.appendChild(option);
    }
    console.log(citySelect)
        // 给select设置事件，当选项发生变化时调用函数citySelectChange
    citySelect.addEventListener("change", citySelectChange);
}

/**
 * 初始化图表需要的数据格式
 */
function initAqiChartData() {
    // 将原始的源数据处理成图表需要的数据格式
    // 处理好的数据存到 chartData 中
    chartData["day"] = aqiSourceData;

    var wCities = {};
    for (var city in aqiSourceData) {
        var weekAqis = {};
        var weekAqi = 0;
        //serNum 用来控制输出第几周
        var serNum = 0;
        //这星期一共多少天
        var total = 1;
        for (var day in aqiSourceData[city]) {
            //获取星期几，星期日是0
            var dayOfWeek = new Date(day).getDay();
            //到了星期六，重新开始一个星期
            if (dayOfWeek == 6) {
                weekAqi += aqiSourceData[city][day];
                weekAqis[serNum + "week"] = weekAqi / total;
                serNum++;
                weekAqi = 0;
                total = 1;
            } else {
                weekAqi += aqiSourceData[city][day];
                total++;
            }
        }
        wCities[city] = weekAqis;
    }
    chartData["week"] = wCities;

    var mCities = {};
    for (var city in aqiSourceData) {
        var monthAqis = {};
        var monthAqi = 0;
        var flag = -1;
        var days = 1;
        for (var day in aqiSourceData[city]) {
            //获取当前是一个月中的第几天
            var month = new Date(day).getMonth();
            if(flag != month)  {
              flag = month;
              days = 1;
              monthAqi = 0;
            }
            monthAqi += aqiSourceData[city][day];
            monthAqis["第" + (month + 1) + "月"] = monthAqi / days ;
            days++;
        }
        mCities[city] = monthAqis;
    }
    chartData["month"] = mCities;
}

/**
 * 初始化函数
 */
function init() {
    initGraTimeForm()
    initCitySelector();
    initAqiChartData();
}
window.onload = init;
